<template>
    <div class="container">
    <div class="header-btn">
        <h1>班级管理</h1>
        <div class="btn-group">
            <el-button type="success">新增</el-button>
            <el-input type="text" placeholder="请输入关键字" v-model="keywords"/>
            <el-button type="primary">搜索</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin: 20px 0;" border>
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column label="班级名称" prop="className"/>
            <el-table-column label="班级人数" prop="studentCount"/>
           <el-table-column label="班级位置" prop="classLocation"/>
           <el-table-column label="创建时间" prop="createTime"/>
            <el-table-column label="操作" width="320">
                <template #default="scope">
                    <el-button-group class="option-btn">
                    <el-button type="primary" :icon="Edit" >编辑</el-button>
                    <el-button type="success" :icon="View">详情</el-button>
                    <el-button type="danger" :icon="Delete">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        
        </el-table>
    </div>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import {getClassList} from '@/api/clazz'
import { Edit, View, Delete } from '@element-plus/icons-vue'
const keywords = ref('')
const tableData = ref([])
//调用后端接口 获取班级列表的数据
const getData = async () => {
    getClassList().then(res=>{
        console.log(res,"===");
        tableData.value = res.data.data
    }).catch(err=>{
        console.log(err)
    })
}
onMounted(()=>{
    getData()
})
</script >
<style lang="less" scoped>
.container {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;

}
.btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
    .el-input {
        width: 200px;
    }
    margin: 10px 0;
}
.option-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    
}
</style>